<template>
    <div class="PublishArticleheader">
        <router-view></router-view>
        <hr class="el-icon-ship">
        <div class="PublishArticleheadercoment">
            <div class="PublishArticleheadercomentheader">
                <div class="PublishArticleheadercomentheadercontent">
                    <i class="el-icon-s-promotion"></i>
                    <span>Comment</span>
                </div>
            </div>
                <div>
                    <div class="PublishArticleheadercomentissue">
                        <div class="PublishArticleheadercomentissuetitle">
                            <input type="text" placeholder="标题" v-model="boke.title">
                            <input type="text" placeholder="类型" v-model="boke.addtype">
                            <input type="text" placeholder="时间" v-model="boke.create_time" readonly="readonly">
                        </div>
                        
                        <div class="PublishArticleheadercomentissuemiddle">
                            <textarea placeholder="The input" class="PublishArticleheadercomentissuemiddletextarea" v-model="boke.content"></textarea>
                        </div>

                        <div class="PublishArticleheadercomentissuebottom">
                            <div class="PublishArticleheadercomentissuebottombuttondiv">
                                <button @click="Submitanarticle">提交</button>
                            </div>
                        </div>
                    </div>
                    <div class="bokecommtnt">
                        <span>{{commentjsonlength}}</span>
                        评论
                    </div>
                    <div>
                        <ul class="bokecomment-list">
                            <li class="bokecomment-line" v-for="itme in commentjson" :key="itme.pk">
                                <div class="bokecomment-list-item">
                                    <a href="#" class="bokecomment-list-item-a">
                                        <img src="https://www.yuanxiapi.cn/api/touxiang/"  class="bokecomment-list-item-a-img">
                                    </a>
                                    <div>
                                        <div>
                                            <div>
                                                <span class="commentname"><a href="#">{{itme.fields.title}}</a></span>
                                                <span class="commenttype">{{itme.fields.addtype}}</span>
                                                
                                            </div>
                                            <div class="commenttime">{{itme.fields.create_time}}</div>
                                            <div class="comentcomtent">{{itme.fields.content}}</div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="loadbokecomment" @click="loadbokecommentbtn"  :class="[commentjsonlength >= 4 ? 'show' : 'noshow' ]">
                        <button class="loadbokecommentbtn">加载更多</button>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
import {requestComment,requestGetn} from '../api/requestPost'
export default {
    name:'PublishArticle',
    data () {
        return {
            boke:{
                title:'',
                addtype:'',
                create_time:'',
                content:'',
                
            },
            timer:null,
            bokeID:null,
            commentjson:null,
            commentjsonlength:null,
            stripcomment:5,
            commenttimer:null,
            commentjsonlengthend:null,
        }
    },
    created () {
        var nowDate=new Date()
        this.boke.create_time=nowDate.getFullYear()+'-'+(nowDate.getMonth()+1)+'-'+nowDate.getDate()
        // console.log(this.create_time)
        
        this.bokeID=this.$route.query.id+''
        // console.log(this.bokeID)
        requestGetn('boke/comment/',{bokeID:this.bokeID,stripcomment:this.stripcomment}).then(res=>{
            // console.log('评论内容',res.data.return)
            this.commentjsonlength=res.data.return.length
            this.commentjson=res.data.return || ''
        })
        // requestGetn('bokecontent/inquire/',{inquire:this.$route.query.id}).then(res=>{
        //     console.log(res.data.return)
        //     this.bokecontentinquire=res.data.return
        //     for (var i in this.bokecontentinquire){
        //         console.log(this.bokecontentinquire[i].fields)
        //     }
        // })
    },
    methods: {
        loadbokecommentbtn(){//获取更多评论
            if(this.commentjsonlength!=this.commentjsonlengthend){
            if(this.commentjsonlength>=4 ){
                this.stripcomment+=5
                console.log(this.commentjsonlength)
                if(this.commenttime){
                    clearTimeout(this.commenttime)
                }
                this.commenttime=setTimeout(()=>{
                    console.log(this.stripcomment)
                    requestGetn('boke/comment/',{bokeID:this.bokeID,stripcomment:this.stripcomment}).then(res=>{
                    // console.log('评论内容',res.data.return)
                    this.commentjsonlength=res.data.return.length
                    this.commentjsonlengthend=this.commentjsonlength
                    this.commentjson=res.data.return || ''
                    })

                },1000)
                
            }else{
                this.$message({
                message: '没有更多评论',
                type: 'warning'
                });
            }}else{
                this.$message({
                message: '没有更多评论',
                type: 'warning'
                });
            }
        },
        Submitanarticle(){//发送评论
            
            // console.log('route传参',typeof(this.bokeID));
            // console.log('route传参',typeof(this.boke.title));
            if(this.timer){
                clearTimeout(this.timer)
                // console.log('正在清楚定时器')
            }
            this.timer=setTimeout(()=>{
                console.log('防抖this',this)
                if(!this.boke.title || this.boke.addtype ||this.boke.create_time ||this.boke.content){
                if (this.boke.content.length>=10){
                requestComment(this.boke.title,this.boke.content,this.boke.addtype,this.boke.create_time,this.bokeID).then(res=>{console.log(res.status+'ccc')
                /*console.log(JSON.stringify(res)+'ccc')*/})
                this.$message({
                        message: '终于发送成功一条评论',
                        type: 'success'
                    });
            }else{
                this.$message({
                message: '亲爱的输入的内容要超过十个字才可以哦',
                type: 'warning'
                });
            }

            }else{
                
                // console.log(this.boke.title)
                this.$message({
                    message: '不能留空哦宝贝',
                    type: 'warning'
                    });
            }

            },1000)

        }
        
    },
    beforeDestroy () {
        clearTimeout(this.timer)
    },
    computed: {
        
    }


}
</script>

<style>
    .show{
        display: block;
    }
    .noshow{
        display: none;
    }
    .loadbokecommentbtn:hover{
        border: 1px solid #49b1f5;
        color: #49b1f5;
    }
    .loadbokecommentbtn{
        display: block;
        margin: auto;
        width: 8em;
        height: 2.9em;
        background-color: transparent;
        border: 1px solid #b2b2b5;
        border-radius: 8px;
        color: #b2b2b5;
        cursor: pointer;
        outline: none;
        
    }
    .loadbokecomment{
        margin-top: 3em;
        
        
        
    }
    .comentcomtent{
        margin: .776em 0 1.5em 0;
        
    }
    .commenttype{
        display: inline-block;
        padding: 0.2em 0.5em;
        font-size: 0.75em;
        border-radius: 0.2em;
        margin-right: 0.3em;
    }
    .commentname a{
        color: #4c4948;
        
    }
    .commentname{
        position: relative;
        text-transform: capitalize;
        font-size: .900em;
        margin-right: 0.900em;
        font-weight: 500;
        text-decoration: none;
        display: inline-block;
        
    }
    .bokecomment-list-item-a-img{
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        padding: 2px;
        border: 1px solid #e8e8ed;
    }
    .bokecomment-list-item-a{
        display: block;
        padding-right:10px ;
        
    }
    .bokecomment-list-item{
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        width: 100%;
    }
    .bokecomment-line{
        border-bottom: 1px dashed #f3eeec;
        margin-bottom: 2em;
        position: relative;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .bokecomment-list{
        list-style: none;
        padding: 0;
        
    }
    .bokecommtnt{
        font-weight: 600;
        
        padding: 16px 5px;
        font-size: 1.25em;
        line-height: 1.7em;
        color: #4c4948;
    }
    .PublishArticleheadercomentissuebottombuttondiv button:hover{
        background: rgb(241, 109, 0);
        transition: all 1s;
        -webkit-transition: all 1s;
    }
    .PublishArticleheadercomentissuebottombuttondiv button:active{
        background: #a4ce7d;
        transition: all 1s;
        -webkit-transition: all 1s;
    }
    .PublishArticleheadercomentissuebottombuttondiv button{
        outline: transparent;
        background: #49b1f5;
        color: #fff;
        font-size: .7em;
        border-radius: 5px;
        cursor: pointer;
        padding: 8px 15px;
        border: none;
    }
    .PublishArticleheadercomentissuebottombuttondiv{
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        text-align: right;
        box-sizing: border-box;
        line-height: 1.75;
        font-size: 14px;
    }
    .PublishArticleheadercomentissuebottom{
        padding: 10px 0;
        line-height: 1.75;
    }
    .PublishArticleheadercomentissuemiddletextarea{
        resize: vertical;
        
        margin-top: 0px;
        margin-bottom: 0px;
        height: 118px;
        color: #b2b2b5;
        width: 100%;
        min-height: 8.75em;
        font-size: .875em;
        background: transparent;
        border: none;
        outline: none;
        padding: 10px 5px;
        max-width: 100%;
        line-height: 1.75;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }
    .PublishArticleheadercomentissuemiddle{
        font-size: 1.1em;
        line-height: 1.75;
        position: relative;
        padding-top:10px ;
    }
    .PublishArticleheadercomentissuetitle input{
        width: 33.33%;
        background: transparent;
        color:#b2b2b5 ;
        border: none;
        border-bottom: 1px dashed #b2b2b5;
        
        line-height: 1.75em;
        outline: none;
        padding: 10px 5px;
        max-width: 100%;
        font-size: .775em;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .PublishArticleheadercomentissuetitle input:active:focus{
        border-bottom: 1px dashed #1aa6b7;
    }
    .PublishArticleheadercomentissuetitle input:focus{
        border-bottom: 1px dashed #784a5b;
    }
    .PublishArticleheadercomentissue{
        border-radius: 5px;
        border: 1px solid #b2b2b5;
        overflow: hidden;
        position: relative;
        padding: 10px;
        
    }
    .PublishArticleheadercomentheader{
        margin-bottom: 20px;
    }
    .PublishArticleheadercomentheadercontent span{
        font-size: 700;
        padding-left: 3px;
    }
    .PublishArticleheadercomentheadercontent{
        display: inline-block;
        vertical-align: middle;
        font-weight: 900;
        font-size: 1.43em;
    }
    hr:hover:before{
        left: 98%;
        transition: all 4s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
    }
    hr:before{
        position: absolute;
        top: -19px;
        left: 5%;
        z-index: 1;
        font-size: 20px;
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        font-style: 600;
        display: inline-block;
        
    }
    hr{
        position: relative;
        margin: 40px auto;
        border: 2px dashed #a4d8fa;
        width: 100%;
        box-sizing: border-box;
        height: 0;
        overflow: visible;
        display: block;
    }
    .herdermiddle>div:first-child{
        padding: 50px 40px;
        align-self: flex-start;
        -webkit-align-self:flex-start;
        -ms-flex-item-align: start;
        border-radius: 8px;
        background: #fff;
        box-shadow:0 3px 8px 6px rgba(7,17,27,0.05);
        transition: all 1s;
        width: 74%;
    }
</style>